<template>
  <div class="dashboard-container">
    <!-- 数据统计卡片 -->
    <el-row :gutter="20" class="stats-cards">
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-header">
            <span class="stat-title">在架短剧数量</span>
            <el-icon class="stat-icon" color="#6366f1">
              <VideoCamera />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ seriesNum }}</div>
            <!-- <div class="stat-change positive">较昨日增加 5.2%</div> -->
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-header">
            <span class="stat-title">播放量</span>
            <el-icon class="stat-icon" color="#6366f1">
              <View />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ flow }}</div>
            <!-- <div class="stat-change positive">较昨日增加 12.7%</div> -->
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-header">
            <span class="stat-title">待发布视频</span>
            <el-icon class="stat-icon" color="#6366f1">
              <List />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ videoNum }}</div>
            <!-- <div class="stat-change neutral">等待发布</div> -->
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-section">
      <el-col :span="24">
        <el-card class="chart-card">
          <div class="chart-header">
            <h3>短剧流量趋势分析</h3>
          </div>
          <div class="chart-container" ref="chartContainer" style="height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 热门短剧排行 -->
    <el-row :gutter="20" class="ranking-section">
      <el-col :span="24">
        <el-card class="ranking-card">
          <div class="ranking-header">
            <h3>热门短剧排行</h3>
          </div>
          <el-table :data="rankingData" style="width: 100%" stripe>
            <el-table-column prop="id" label="排名" width="80" align="center" />
            <el-table-column prop="title" label="剧名" min-width="200" />
            <el-table-column prop="categoryName" label="分类" align="center" />
            <el-table-column prop="episodeCount" label="集数" align="center" />
            <el-table-column prop="likeCount" label="点赞数" align="center" />
            <el-table-column prop="playCount" label="播放量" align="center" />
            <el-table-column prop="collectCount" label="收藏数" align="center" />
            <el-table-column prop="commentCount" label="评论数" align="center" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, onMounted, nextTick } from 'vue'
import { VideoCamera, View, List } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { dashboardApi } from '@/api/dashboard/index'

export default {
  name: 'Dashboard',
  components: {
    VideoCamera,
    View,
    List
  },
  setup() {
    const chartContainer = ref(null)
    // 初始化图表
    const initChart = (xAxisData, seriesData) => {
      const chartDom = chartContainer.value
      const myChart = echarts.init(chartDom)
      
      const option = {
        title: {
          show: false
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255, 255, 255, 0.95)',
          borderColor: '#e4e7ed',
          borderWidth: 1,
          textStyle: {
            color: '#606266'
          },
          confine: true,  // 将tooltip限制在图表区域内
          appendToBody: true,  // 将tooltip添加到body而不是图表容器
        },
        legend: {
          data: ['喜剧', '青春', '科幻', '悬疑', '古装', '仙侠', '友情', '恩怨', '剧情', '反转', '犯罪', '逆袭', '玄幻', '爱情', '亲情', '惊悚', '奇幻'],
          top: '10px',
          textStyle: {
            color: '#606266',
            fontSize: 12
          },
          itemWidth: 12,
          itemHeight: 8
        },
        grid: {
          left: '60px',
          right: '30px',
          top: '50px',
          bottom: '60px'
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisLine: {
            lineStyle: {
              color: '#e4e7ed'
            }
          },
          axisTick: {
            lineStyle: {
              color: '#e4e7ed'
            }
          },
          axisLabel: {
            color: '#909399',
            fontSize: 12,
            interval: 1 // 显示所有刻度标签
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#f5f7fa',
              type: 'dashed'
            }
          }
        },
        yAxis: {
          type: 'value',
          nameTextStyle: {
            color: '#909399',
            fontSize: 12
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#f5f7fa',
              type: 'dashed'
            }
          }
        },
        series: seriesData
      }
      
      myChart.setOption(option)
      
      // 响应式处理
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
    // 热门短剧排行数据
    const rankingData = ref([])
    onMounted(() => {
      nextTick(() => {
        console.log('获取仪表盘数据')
        getDashboardData() //获取仪表盘数据
        getHotSeriesFun() //获取热门短剧排行
      })
    })

    //获取仪表盘页面数据
    const seriesNum = ref(0)
    const flow = ref(0)
    const videoNum = ref(0)
    const getDashboardData = async () => {
      console.log('获取仪表盘数据')
      const res = await dashboardApi.getDashboard()
      if (res) {
        console.log('仪表盘数据:', res)
        seriesNum.value = res.seriesNum
        flow.value = res.flow
        videoNum.value = res.videoNum
        let trend = res.trend
        const { xAxisData, seriesData } = formatTrendDataForECharts(trend);
        console.log('xAxisData:', xAxisData)
        console.log('seriesData:', seriesData)
        await initChart(xAxisData, seriesData)
      }
    }
    function formatTrendDataForECharts(trend) {
      const genreMap = {};

      // 遍历每个日期
      for (const [date, genres] of Object.entries(trend)) {
        for (const [genre, value] of Object.entries(genres)) {
          if (!genreMap[genre]) {
            genreMap[genre] = {
              name: genre,
              type: 'line',
              data: []
            };
          }
          genreMap[genre].data.push(parseFloat(value));
        }
      }

      // 提取日期作为 xAxis 的 data
      const dates = Object.keys(trend);

      return {
        xAxisData: dates,
        seriesData: Object.values(genreMap)
      };
    }
    //获取热门短剧排行
    const getHotSeriesFun = async () => {
      console.log('获取热门短剧排行')
      const res = await dashboardApi.getHotSeries()
      if (res) {
        console.log('热门短剧排行:', res)
        rankingData.value = res.list
      }
    }
    return {
      chartContainer,
      rankingData,
      seriesNum,
      flow,
      videoNum
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 统计卡片样式 */
.stats-cards {
  margin-bottom: 20px;
}

.stat-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.stat-title {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.stat-icon {
  font-size: 20px;
}

.stat-content {
  text-align: left;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.stat-change {
  font-size: 12px;
  font-weight: 500;
}

.stat-change.positive {
  color: #22c55e;
}

.stat-change.negative {
  color: #ef4444;
}

.stat-change.neutral {
  color: #6b7280;
}

/* 图表区域样式 */
.chart-section {
  margin-bottom: 20px;
}

.chart-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.chart-header {
  padding: 0 0 20px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.chart-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

.chart-container {
  width: 100%;
  height: 400px;
}

/* 排行榜样式 */
.ranking-section {
  margin-bottom: 20px;
}

.ranking-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.ranking-header {
  padding: 0 0 20px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.ranking-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

.tag-item {
  margin-right: 4px;
}

.growth-rate.positive {
  color: #22c55e;
  font-weight: 600;
}

.growth-rate.negative {
  color: #ef4444;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard-container {
    padding: 10px;
  }
  
  .stats-cards .el-col {
    margin-bottom: 15px;
  }
  
  .stat-number {
    font-size: 24px;
  }
}
</style>